<script setup>
//引入公共组件
import CommonView from "./CommonView.vue"
//引入仓库数据
import { useWeatherStore } from "@/stores/weather";
import { storeToRefs } from "pinia";
import { onMounted } from "vue";
import { useRouter } from "vue-router";

const router = useRouter()

const { cityname, likeCityArr, address, isAppear } = storeToRefs(useWeatherStore())
const { lookWeather, deleteWeather, getLikeCity, inputWeather } = useWeatherStore()

//弹出提示城市的点击功能，点击后跳转页面，并将相关城市名称传递给路由，input输入清除
const handleClick = () => {
  router.push(`/search/${address.value}`)
  lookWeather()
}

//查看按钮点击功能，点击后跳转,将城市名称通过路由传入，并调用getWeather函数更新图表
const handleLook = (name) => {
  router.push(`/search/${name}`)
  lookWeather()
}

//挂载时渲染存储的数据
onMounted(() => {
  getLikeCity()
})

</script>

<template>
  <CommonView>
    <template #default>
      <div class="mv">
        <div class="search">
          <input type="text" placeholder="请输入城市名称" v-model="cityname" @input="inputWeather">
          <ul>
            <p style="display: none;">对不起网络似乎除了点问题 请稍后再查询</p>
            <p v-if="isAppear == 0">似乎没有找到你查找的城市</p>
            <li v-else :class="cityname ? '' : 'disappear'" @click="handleClick">
              {{ address }}
            </li>
          </ul>
          <div :class="cityname ? 'like disappear' : 'like'">
            <div v-if="likeCityArr.length > 0">
              <div class=" like-city" v-for="item in likeCityArr" :key="item.adcode">
                <div class="name">
                  <!-- class=:'duration-300' -->
                  <h3>{{ item.city }}</h3>
                  <span>{{ item.temperature }}℃</span>
                </div>
                <div class="button">
                  <button @click="handleLook(item.city)">查看</button>
                  <button @click="deleteWeather(item.adcode)">删除</button>
                </div>
              </div>
            </div>
            <div v-else style="text-align: center;">暂时没有保存过城市天气信息，请查询后点击右上角"+"号保存。</div>
          </div>
          <h2>近期天气</h2>
        </div>
      </div>
    </template>
  </CommonView>
</template>

<style scoped>
.mv {
  margin: 0 276.4px;

  .search {
    margin-bottom: 32px;
    padding-top: 16px;

    input {
      padding: 4px 8px;
      width: 100%;
      color: white;
      font-size: 16px;
      line-height: 24px;
      background: #00668a;
      border: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.8);
      outline: none;

      &::placeholder {
        color: #aaa;
      }

      &:focus {
        border-bottom: 1px solid transparent;
        box-shadow: 0 4px 6px -1px rgb(0, 0, 0, 0.2);
      }
    }

    ul {
      position: absolute;
      top: 140px;
      left: 0;
      width: 968px;
      padding: 0 276.4px;
      cursor: pointer;

      p {
        padding: 16px 4px;
        background: #004e71;
      }

      li {
        &.disappear {
          display: none;
        }

        padding: 16px 4px;
        width: 100%;
        background: #004e71;
      }
    }
  }

  .like {
    display: block;
    margin-top: 40px;

    &.disappear {
      display: none;
    }

    .like-city {
      display: flex;
      justify-content: space-between;

      .name {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        padding: 8px 16px;
        background: #004e71;
        cursor: pointer;
        line-height: 24px;
        transition: 0.5s;
      }

      .button {
        display: flex;
        gap: 0.5rem;
        /* margin-left: 32px; */
        margin-bottom: 16px;
        display: none;

        button {
          padding: 8px 16px;
          width: 80px;
          height: 100%;
          text-align: center;
          color: white;
          background-color: rgb(234 179 8);
          border: none;
          cursor: pointer;
        }
      }

      &:hover .name {
        flex: 0.98;
      }

      &:hover .button {
        display: flex;
      }
    }
  }

  h2 {
    margin-top: 1.5rem;
    line-height: 24px;
  }
}
</style>